<template>
	<view class="container">
		<u-navbar :is-back="false" :background="navBarBackground"><chat-status-bar></chat-status-bar></u-navbar>
		<template v-if="userToken">
			<!-- #ifdef APP-PLUS -->
			<chat-push-permission></chat-push-permission>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<image @tap.stop="toPage" data-url="/pageSetting/about/download" class="app-download-image" :src="adv.download_adv" mode="scaleToFill"></image>
			<!-- #endif -->
			<!-- <u-sticky :offset-top="stickyOffsetTop" h5-nav-height="44"> -->
			<view class="chat-tabs">
				<!--  -->
				<u-tabs-swiper v-if="!switchIdentityStatus" :active-item-style="{ fontSize: '28rpx' }" font-size="28" active-color="#F85962" :bar-style="{ bottom: '15rpx' }" :height="100" ref="uTabs" :list="tabList" :current="tabCurrentIndex" @change="onTabsChange" :is-scroll="false"></u-tabs-swiper>
			</view>
			<!-- <view class="chat-tabs">
					<view class="chat-tabs-item">
						<view class="chat-tabs-item-content" @tap.stop="switchChunkType" data-type="single">
							<view class="chat-tabs-item-text">私信</view>
							<view class="chat-tabs-item-line" :class="{ hide: chunkType != 'single' }"></view>
						</view>
					</view>

					<view class="chat-tabs-item">
						<view class="chat-tabs-item-content" @tap.stop="switchChunkType" data-type="group">
							<view class="chat-tabs-item-text">群聊</view>
							<view class="chat-tabs-item-line" :class="{ hide: chunkType != 'group' }"></view>
						</view>
					</view>
					<view class="chat-tabs-item" v-if="userInfo.login_identity == 10">
						<view class="chat-tabs-item-content" @tap.stop="switchChunkType" data-type="matchmaker">
							<view class="chat-tabs-item-text">红娘</view>
							<view class="chat-tabs-item-line " :class="{ hide: chunkType != 'matchmaker' }"></view>
						</view>
					</view>
					<view class="chat-tabs-item">
						<view class="chat-tabs-item-content" @tap.stop="switchChunkType" data-type="notice">
							<view class="chat-tabs-item-text">通知</view>
							<view class="chat-tabs-item-line " :class="{ hide: chunkType != 'notice' }"></view>
						</view>
					</view>
					 <view class="chat-tabs-item">
						<view class="chat-tabs-item-content" @tap.stop="switchChunkType" data-type="blackList">
							<view class="chat-tabs-item-text">黑名单</view>
							<view class="chat-tabs-item-line" :class="{ hide: chunkType != 'blackList' }"></view>
						</view>
					</view>
				</view> -->
			<!-- </u-sticky> -->
			<view v-if="!switchIdentityStatus">
				<swiper :duration="200" :disable-touch="true" :current="swiperCurrentIndex" @transition="transition" @animationfinish="animationfinish" class="chat-tabs-chunk" :style="{ height: scrollHeight + 'px' }">
					<swiper-item class="swiper-item">
						<!-- :class="{ hide: chunkType != 'single' }" -->
						<single-chat-scroll-chunk ref="singleChatScrollChunk" :height="scrollHeight" @handle="toChatPage"></single-chat-scroll-chunk>
					</swiper-item>
					<swiper-item class="swiper-item">
						<!-- :class="{ hide: chunkType != 'group' }" -->
						<group-chat-scroll-chunk ref="groupChatScrollChunk" :height="scrollHeight" @handle="toChatPage"></group-chat-scroll-chunk>
					</swiper-item>
					<!-- :class="{ hide: chunkType != 'matchmaker' }" -->
					<swiper-item class="swiper-item" v-if="userInfo.login_identity == 10">
						<view class="matchmaker-chunk"><matchmaker-card ref="matchmakerCard" @onChat="toChatPage"></matchmaker-card></view>
					</swiper-item>
					<swiper-item class="swiper-item">
						<!-- :class="{ hide: chunkType != 'notice' }" -->
						<notice-session-scroll-chunk ref="noticeSessionScrollChunk" :height="scrollHeight"></notice-session-scroll-chunk>
					</swiper-item>
				</swiper>

				<!-- <black-list-scroll-chunk ref="blackListScrollChunk" :class="{ hide: chunkType != 'blackList' }" :height="scrollHeight"></black-list-scroll-chunk> -->
			</view>
		</template>
		<vip-join-popup v-model="vipJoinPopup"></vip-join-popup>
	</view>
</template>

<script>
import Tools from '@/utils/Tools.js';
import ShareMixin from '@/mixins/share-mixins.js';
import ShareTypeEnum from '@/utils/enum/ShareType.js';
import chatStatusBar from '@/components/custom/chat-status-bar.vue';
// #ifdef APP-PLUS
import chatPushPermission from '@/components/custom/chat-push-permission.vue';
// #endif
import chatSessionItem from '@/components/chat/chat-session-item.vue';
import vipJoinPopup from '@/components/custom/vip-join-popup.vue';

import { mapState } from 'vuex';
import singleChatScrollChunk from '@/components/combination/single-chat-scroll-chunk.vue';
import groupChatScrollChunk from '@/components/combination/group-chat-scroll-chunk.vue';
import matchmakerCard from '@/components/combination/matchmaker-card.vue';
import noticeSessionScrollChunk from '@/components/combination/notice-session-scroll-chunk.vue';
// import blackListScrollChunk from '@/components/combination/black-list-scroll-chunk.vue';
export default {
	mixins: [ShareMixin],
	components: {
		matchmakerCard,
		chatSessionItem,
		chatStatusBar,
		vipJoinPopup,
		singleChatScrollChunk,
		groupChatScrollChunk,
		noticeSessionScrollChunk,
		// blackListScrollChunk,
		// #ifdef APP-PLUS
		chatPushPermission
		// #endif
	},
	computed: {
		...mapState({
			matchmaker: state => state.user.matchmaker,
			noticePermissionTip: state => state.device.noticePermissionTip,
			itemUnread: state => state.iMessage.itemUnread,
			totalUnread: state => state.iMessage.totalUnread,
			adv: state => state.cache.adv
		}),
		scrollHeight: function() {
			const systemInfo = uni.getSystemInfoSync();
			let scrollHeight = systemInfo.windowHeight - 44 - systemInfo.statusBarHeight - uni.upx2px(106);
			// #ifdef APP-PLUS
			if (this.noticePermissionTip && !this.permission.notice) {
				scrollHeight = scrollHeight - uni.upx2px(118);
			}
			// #endif
			// #ifdef H5
			scrollHeight = scrollHeight - uni.upx2px(118);
			// #endif
			return scrollHeight;
		},
		tabList: function() {
			const { singleSession, groupSession, notice } = this.itemUnread;
			let tabList = [{ name: `私信${singleSession <= 0 ? '' : singleSession > 99 ? '(99+)' : '(' + singleSession + ')'}` }, { name: `群聊${groupSession <= 0 ? '' : groupSession > 99 ? '(99+)' : '(' + groupSession + ')'}` }];
			if (this.userInfo.login_identity == 10) {
				tabList.push({ name: '红娘' });
			}
			tabList.push({ name: `通知${notice <= 0 ? '' : notice > 99 ? '(99+)' : '(' + notice + ')'}` });
			return tabList;
		}
	},
	data() {
		return {
			tabCurrentIndex: 0,
			swiperCurrentIndex: 0,
			deviceModel: '',
			networkType: '',
			stickyOffsetTop: 0,
			chunkType: 'single',
			navBarBackground: {
				background: 'linear-gradient(180deg,rgba(237,79,93,1) 0%,rgba(251,122,142,1) 100%)'
			},
			disabled: false,
			btnWidth: 180,
			load: false,
			shareParam: {
				object_type: ShareTypeEnum.PLATFORM.value,
				object_id: 0,
				object_path: 'pages/index/index',
				object_query: ''
			},
			switchIdentityStatus: true
		};
	},

	onLoad() {
		this.switchIdentityStatus = false;
		const systemInfo = uni.getSystemInfoSync();
		uni.$on('switchIdentity', this.lockIdentityStatus);

		// #ifdef APP-PLUS
		this.stickyOffsetTop = Tools.px2rpx(44) + Tools.px2rpx(systemInfo.safeArea.top);
		// #endif
	},
	onUnload() {
		uni.$off('switchIdentity', this.lockIdentityStatus);
	},
	onShow() {
		if (this.load) {
			// this.$refs.singleChatScrollChunk && this.$refs.singleChatScrollChunk.refreshData();
			// this.$refs.groupChatScrollChunk && this.$refs.groupChatScrollChunk.getGroupMessage();
			this.$refs.matchmakerCard && this.$refs.matchmakerCard.refreshData();
			// this.$refs.noticeSessionScrollChunk && this.$refs.noticeSessionScrollChunk.refreshData();
			// this.$refs.blackListScrollChunk && this.$refs.blackListScrollChunk.refreshData();

			if (this.switchIdentityStatus) {
				this.switchIdentityStatus = false;
			}
		} else {
			this.load = true;
		}
		if (this.isLogin()) {
			this.initShareMessage();
		}
		// #ifdef H5
		if (this.totalUnread <= 0) {
			uni.removeTabBarBadge({
				index: 1
			});
		} else {
			uni.setTabBarBadge({
				index: 1,
				text: String(this.totalUnread > 99 ? '...' : this.totalUnread)
			});
		}
		// #endif
	},
	onHide() {
		if (this.load) {
			setTimeout(() => {
				switch (this.chunkType) {
					case 'group':
						this.$refs.groupChatScrollChunk && this.$refs.groupChatScrollChunk.getGroupMessage();
						break;
					case 'matchmaker':
						this.$refs.matchmakerCard && this.$refs.matchmakerCard.refreshData();
						break;
					case 'notice':
						this.$refs.noticeSessionScrollChunk && this.$refs.noticeSessionScrollChunk.refreshData();
						break;
					case 'blackList':
						this.$refs.singleChatScrollChunk && this.$refs.singleChatScrollChunk.refreshData();
						break;
					default:
						this.$refs.singleChatScrollChunk && this.$refs.singleChatScrollChunk.refreshData();
						break;
				}
			}, 1000);
		}
		// this.tabShow = false
	},
	methods: {
		lockIdentityStatus(data) {
			console.log(data);
			this.switchIdentityStatus = true;
			setTimeout(() => {
				this.tabCurrentIndex = 0;
				this.swiperCurrentIndex = 0;
			}, 1000);
		},
		chatToMachmaker() {
			if (this.matchmaker) {
				this.startChat(this.matchmaker.user_id);
			}
		},

		toChatPage(data) {
			this.startChat(data.key);
		},
		switchChunkType(e) {
			this.chunkType = e.currentTarget.dataset.type;
		},
		onTabsChange(index) {
			console.log(index);
			this.swiperCurrentIndex = index;
		},
		transition(e) {
			let dx = e.detail.dx;
			this.$refs.uTabs && this.$refs.uTabs.setDx(dx);
		},
		// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
		// swiper滑动结束，分别设置tabs和swiper的状态
		animationfinish(e) {
			let current = e.detail.current;
			this.$refs.uTabs && this.$refs.uTabs.setFinishCurrent(current);
			this.swiperCurrentIndex = current;
			this.tabCurrentIndex = current;
		}

		//
	}
};
</script>

<style lang="scss">
page {
	background-color: #fff;
}

.chat-tabs {
	height: 106rpx;
	border-bottom: #f8f8f8 solid 6rpx;
	box-sizing: border-box;
	background: #fff;
	display: flex;
	justify-content: center;
	.chat-tabs-item {
		padding: 0 15rpx;
		margin: 0 20rpx;
		height: 100rpx;
		.chat-tabs-item-content {
			height: 100rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.chat-tabs-item-text {
				height: 38rpx;
				font-size: 28rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-weight: 400;
			}
			.chat-tabs-item-line {
				height: 8rpx;
				width: 100%;
				background: rgba(248, 89, 98, 1);
				border-radius: 4rpx;
				margin-top: 1rpx;
				&.hide {
					opacity: 0;
				}
			}
		}
	}
}
.session-chunk {
	background-color: #fff;
}
.matchmaker-chunk {
	padding: 60rpx 0 0;
	padding-bottom: 100rpx;
	display: flex;
	justify-content: center;
}

.chat-tabs-chunk {
	.hide {
		display: none;
	}
}
.app-download-image {
	height: 118rpx;
	width: 750rpx;
	display: block;
}
</style>
